<!-- 分包商退库高级搜索 -->
<template>
    <div class="e-form">
        <div class="tabs">
            <el-form ref="form" :model="formData" label-width="100px">
                <el-row>
                    <el-form-item label="退库日期：">
                            <el-date-picker type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" v-model="formData.beginPlanDate"  style="width: 47%;"></el-date-picker>
                            <div class="separ el-icon-minus"></div>
                            <el-date-picker type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" v-model="formData.endPlanDate"  style="width: 47%;"></el-date-picker>
                        </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="机构：">
                            <el-input
                                v-model="orgName"
                                placeholder="请选择机构"
                                readonly
                            >
                                <i slot="suffix" class="el-input__icon el-icon-document-copy" @click="selectOrg"></i>
                            </el-input>
                        </el-form-item>
                 </el-row>
                 <el-row>
                    <el-form-item label="分包商：">
                            <el-input
                                v-model="subcontractorName"
                                placeholder="请选择分包商"
                                readonly
                            >
                                <i slot="suffix" class="el-input__icon el-icon-document-copy" @click="selectsubcontractor"></i>
                            </el-input>
                        </el-form-item>
                 </el-row>
                  <el-row>
                    <el-form-item label="业务类型：">
                                <checkAll :chackdData.sync="businessTypeList" @checkdData="businessTypes" ref="businessType"/>
                        </el-form-item>
                 </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="状态：">
                            <CheckAll :chackdData.sync="stateForm" @checkdData="checkedStates" ref="checkedState"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import CheckAll from '@/components/common/checkAll'
import { selectChildrenOrg } from '@/api/equip/popupCallback.js'
import { selectOuter } from '@/api/materials/HeightSearch.js'
export default {
    data () {
        return {
            res: '',
            checkAll: false,
            isIndeterminate: false,
            checkedState: [], //选择的状态
            orgName: '', //机构名称
            supplierName: '',
            subcontractorName: '',
            formData: {
                'beginPlanDate': '',
                'businessType': [],
                'endPlanDate': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'page': 1,
                'states': [],
                'subcontractorId': ''
            },
            businessTypeList: [
                {
                    value: 1,
                    label: '分包合同',
                },
                {
                    value: 2,
                    label: '加工合同',
                },
                {
                    value: 3,
                    label: '销售合同',
                },
                {
                    value: 4,
                    label: '事实合同',
                },
            ],
            isIncludingProcessingFeeList: [
                {
                    value: '0',
                    label: '是（外部加工）'
                },
                {
                    value: '1',
                    label: '否（自行加工）'
                },
            ],
            isOutList: [
                {
                    value: '0',
                    label: '新增'
                },

                {
                    value: '1',
                    label: '磅单传输'
                },
            ],
            stateForm: [
                {
                    value: '0',
                    label: '草稿'
                },
                {
                    value: '1',
                    label: '审核中'
                },
                {
                    value: '2',
                    label: '已审核'
                },
                {
                    value: '5',
                    label: '已作废'
                },

            ],
        }
    },
    components: {
        CheckAll
    },
    computed: {
        // ...mapState({
        //     stateForm: state => state.equip.equipData.state //状态
        // }),
        statusLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value === param)
                return obj.label
            }
        },
    },
    watch: {
        formData: {
            handler (newVal) {
                this.setSearchData({ equipSearchData: newVal })
            },
            deep: true
        }
    },
    mounted () {
    },
    methods: {
        ...mapMutations(['setSearchData']),
        //本机构及下级机构
        async selectOrg () {
            let data =  await selectChildrenOrg()
            this.orgName = data[0].orgName
            this.formData.orgId =  data[0].orgId
        },
        //分包商
        async selectsubcontractor () {
            let data =  await selectOuter()
            this.subcontractorName = data[0].outerName
            this.formData.subcontractorId =  data[0].id
        },

        //获取选中的状态
        checkedStates (states) {
            this.formData.states = states
        },
        businessTypes (states) {
            this.formData.businessType = states
        },

    },
}
</script>

<style lang='scss' scoped>
.separ{
        display: inline-block;
        font-weight: bold;
        width: 4%;
        margin: 0 1% 0 1%;
        text-align: center;
    }
  .e-form {
    padding: 20px;
}

</style>
